<template>
    <div class="blog">
        <banner :image="image"></banner>
        <el-row>
            <el-col :span="12" :offset="4" >
                <article-card v-for="(item,index) in blogList" :key="index" :content="item"></article-card>
                <el-button v-show="hasNextPage" @click="loadMore">more</el-button>
            </el-col>
<!--            分类标签-->
            <el-col :span="4" style="margin-top: 50px;border-radius: 15px;">
                <el-card style="border-radius: 20px">
                    <template #header>
                        <div class="card-header">
                            <span class="card-title">分类</span>
                        </div>
                    </template>
                    <div>
                        <el-tag type="success" class="animated fadeInDown tag">所有博客</el-tag>
                        <el-tag v-for="(item,index) in typeList"  :key="index" class="animated fadeInDown tag">{{item.name}}</el-tag>
                    </div>
                </el-card>
                <el-card style="margin-top:20px;border-radius: 20px">
                    <template #header>
                        <div class="card-header">
                            <span class="card-title">博客推荐</span>
                        </div>
                    </template>
                    <div>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">C/C++</el-tag>
                        <el-tag class="animated fadeInDown tag">SpringBoot</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">SpringBoot</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                    </div>
                </el-card>
                <el-card style="margin-top:20px;border-radius: 20px">
                    <template #header>
                        <div class="card-header">
                            <span class="card-title">博客留言</span>
                        </div>
                    </template>
                    <div>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">C/C++</el-tag>
                        <el-tag class="animated fadeInDown tag">SpringBoot</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">SpringBoot</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                    </div>
                </el-card>
                <el-card style="margin-top:20px;margin-bottom: 20px;border-radius: 20px">
                    <template #header>
                        <div class="card-header">
                            <span class="card-title">博客留言</span>
                        </div>
                    </template>
                    <div>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">C/C++</el-tag>
                        <el-tag class="animated fadeInDown tag">SpringBoot</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">SpringBoot</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                        <el-tag class="animated fadeInDown tag">Java语言</el-tag>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Banner from "@/components/body/Banner";
import ArticleCard from "@/components/body/ArticleCard";
import {getBlogList, getTypes} from "@/api";

export default {
    name: "Blog",
    data() {
        return {
            typeList:[],
            blogList: [],
            currPage: 1,
            size: 5,
            pages: 0,
            hasNextPage: false,
            image: '/static/website/background.jpg',
            avatar: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        }
    },
    components: {
        ArticleCard,
        Banner
    },
    methods:{
        fetchList() {
            getBlogList(this.currPage, this.size).then(res => {
                //console.log(res);
                this.blogList = res.data.records || []
                this.currPage = res.data.current
                this.pages = res.data.pages
                this.hasNextPage = this.currPage < this.pages;
                //console.log(this.postList);
            }).catch(err => {
                console.log(err)
            })
        },
        loadMore() {
            this.currPage = this.currPage + 1;
            getBlogList(this.currPage, this.size).then(res => {
                this.blogList = this.blogList.concat(res.data.records || [])
                this.currPage = res.data.current
                this.pages = res.data.pages
                this.hasNextPage = this.currPage < this.pages;
            })
        },
        getTypes(){
            var that=this;
            getTypes()
                .then(res=>{
                    that.typeList=res.data;
                })
        },
        randomType(){
            var i=Math.floor(Math.random()*4)
            var types=["","success","info","warning","danger"];
            return types[i];
        }
    },
    created() {
        this.fetchList();
        this.getTypes();
    }
}
</script>

<style scoped>
.blog {
    min-height: 10rem;
}
.card-title{
    font-weight: bold;
    font-size: 18px;
    font-family: 微软雅黑, serif;
}
.tag{
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 20px;
}
</style>
